前端Bug解決方案

voyagelab 發布于2019-08-29 13:25 / 2612人閱讀

摘要：不在此一一列舉，若你遇到代表性問題歡迎留言參考種常見的標簽錯誤寫法小結結構層問題的解決方案就是谷歌瀏覽器按打開控制臺看元素結構是不是你設想的一樣。解決方案在的時候設置才能清除漸變背景。

沒錯！我正在寫bug呢！不管你是小白還是大牛，寫bug無可避免，遇到bug怎么辦？別慌！毛主席教導我們“戰略上藐視BUG，戰術上重視BUG”！
前端遇到的bug無非就三個方面結構層（HTML），表現層（CSS），行為層（JavaScript）。

一、結構層（HTML）

HTML出錯的主要原因是對規范不夠理解，沒有按照規范來布局。網上搜到很多常見的HTNML錯誤都是如此：

錯誤1. 標簽嵌套混亂

例1：比如常見的p標簽里嵌套div標簽

我是一個段落

我是一個塊級元素

我是一個段落

瀏覽器解析后就變成這樣了

例2：缺少結束標簽，或結束標簽時機不對。
有時候往往是一個標簽沒有閉合導致整個布局錯亂。

/*錯誤代碼*/

2222

aaa /*正確代碼*/

2222

錯誤原因：DTD中規定了塊級元素是不能放在P里;P標簽內包含塊元素時，它會先結束自己。另外提一下，內聯元素不可以包含塊元素。
解決思路：如上圖，就是谷歌瀏覽器按F12（command+option）打開控制臺看元素。

錯誤2.濫使用br標簽

br標簽作用在于換行的，而被用來增加行間距和內聯元素之間的換行。

/*錯誤代碼*/

我是一句話

我是一句話

我是一句話

我是一個鏈接
 我是一個鏈接
 我是一個鏈接

/*正確代碼*/

我是一句話
我是一句話
我是一句話

錯誤原因： br標簽目的在于換行，作為增加間距不能準確的給出具體的間距大小，作為列表不能明確的表示這是一個列表。
解決思路：，通常是用line-height來調整行間距，用padding來解決段落之間的間距。這樣也能很好的做到結構樣式分離。

錯誤3.使用內聯的樣式

為了代碼結構清晰，結構樣式分離，我們不推薦使用內聯樣式。另外當有行為層的時候我們大多通過js來改變的是內聯樣式。在結構使用內聯樣式會帶來很多麻煩。

/*錯誤代碼*/



/*正確代碼*/

//使用樣式表定義樣式。

不在此一一列舉，若你遇到代表性問題歡迎留言！參考:10種常見的HTML標簽錯誤寫法

小結：結構層（HTML）問題的解決方案就是谷歌瀏覽器按F12（command+option）打開控制臺看元素結構是不是你設想的一樣。

二、表現層（CSS）

少數原因由于粗心大意少寫了分號或者結尾的花括號｝導致后面的樣式都不起作用了。或者單詞拼寫錯誤引起的樣式無效。在開發過程中建議使用代碼提示，自動補全功能的編輯器（比如：WebStorm）。學習練習的時候使用手寫的編輯器。
css錯誤大多來自對css權重的不理解。排除粗心因素通常遇到到設置的樣式不起作用就是這類原因。

錯誤1：z-index不起作用，或者是負的margin值會影響z-index？。

p{background-color: red; width: 200px; height: 100px ; position: relative; z-index: 1}
div{background-color: green;width: 200px; height: 100px; margin-top: -50px ;z-index: 999}
  我是一個段落
  我是一個塊

錯誤原因，定位影響層級，定位元素層級高。z-index無效。另外浮動元素也影響層級。
解決思路：查找CSS錯誤的完整步驟
小結：表現層（CSS）解決方案還是利用瀏覽器的元素審查功能，查看你的元素，給元素添加行內樣式測試是否有效。如果你的css樣式經常不起作用。請認真閱讀下面兩篇文章css權重和Css常用的排序方式權重分配

錯誤2：在用background-image設置漸變背景的時候，在hover的時候設置background：none無效，還是有漸變背景。

解決方案：在hover的時候設置background-image:none才能清除漸變背景。

錯誤3：有的瀏覽器正常有的瀏覽器不正常

這里主要針對css3的兼容性，關于低版本的ie不做考慮。抵制垃圾瀏覽器從我做起！
例如

display:flex
display:-webkit-flex

錯誤原因：沒有做兼容性處理；
解決方案：CSS3新特性，兼容性，兼容方法總結

三、行為層（JavaScript） 錯誤1：找不到對象

例如:

當我們運行這段代碼的時候報出了一個錯誤

"Uncaught TypeError: Cannot set property "innerHTML" of null"    /AJAX_TEST/selector_test.html (43)

這個時候我們只要根據錯誤提示找到出錯的地方(43)行，這個時候我們會發現這段代碼

document.querySelector("#div1 > div").innerHTML = "first div";

出錯的原因就是document.querySelector("#div1 > div")該選擇器找不到該元素節點，然后我們根據選擇器找到節點

發現該元素節點被注釋掉了，我們將該注釋取消就OK了
解決思路：在谷歌瀏覽器控制臺查看有沒有報錯。有報錯的，根據報錯提示，直接找到報錯的那行代碼。
用注釋法或者alert輸出法查找原因。

錯誤2:方法/變量未定義

例如：通過類名獲取元素在有的瀏覽器不支持
解決思路：用if判斷如果瀏覽器支持的情況下怎么出來，不支持的情況下怎么處理，兼容性處理如下

   function getClass(n){    
            if(document.getElementsByClassName){
               return document.getElementsByClassName(n);
            }else{
                var objArr=document.getElementsByTagName("*");
                var arrClass=[];
                for(var i=0;i
小結：JavaScript錯誤處理方式
1.通過谷歌或火狐瀏覽器控制臺查看錯誤提示，定位錯誤代碼，打斷點定位錯誤代碼。
2.如果沒錯誤提示的，在源代碼中用alert輸出，或者逐步注釋功能代碼塊，定位錯誤代碼片段。

GPU云服務器云服務器前端解決方案前端方案 bug webrtc bug

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112589.html

前后端分離的問題與解決方案

摘要：版本升級每個文件方法頭標明版本號，每次修改需修改版本號大于原版本號，即為版本升級。這些天項目有的API出現版本控制問題，著實忙乎了一小陣，因為項目使用TP5的傳統方法進行版本控制（api目錄下進行版本區分，由請求路徑決定使用的版本） showImg(https://segmentfault.com/img/bVbekSM?w=200&h=128); 但是問題往往是，項目使用了v2版本...

zilu 2019-07-01 10:23 評論0 收藏0
年輕人，勸你不要做前端

摘要：前端娛樂圈這些年前端有點熱鬧。刷量，撕，版本帝想要混前端，除了要有足夠強的學習力。領導說所有測試的都要先指派給前端，前端查清原因后再指給當事人。年，前端不再只是切圖仔。 ? 前端娛樂圈這些年前端有點熱鬧。 github刷量，vue撕x，版本帝angularJs...... showImg(https://segmentfault.com/img/remote/146000001937...

sevi_stuo 2019-08-23 17:56 評論0 收藏0
前端Bug解決方案

摘要：不在此一一列舉，若你遇到代表性問題歡迎留言參考種常見的標簽錯誤寫法小結結構層問題的解決方案就是谷歌瀏覽器按打開控制臺看元素結構是不是你設想的一樣。解決方案在的時候設置才能清除漸變背景。沒錯！我正在寫bug呢！不管你是小白還是大牛，寫bug無可避免，遇到bug怎么辦？別慌！毛主席教導我們戰略上藐視BUG，戰術上重視BUG！前端遇到的bug無非就三個方面結構層（HTML），表現層（CSS...

cppowboy 2019-08-01 17:34 評論0 收藏0
前端Bug解決方案

摘要：不在此一一列舉，若你遇到代表性問題歡迎留言參考種常見的標簽錯誤寫法小結結構層問題的解決方案就是谷歌瀏覽器按打開控制臺看元素結構是不是你設想的一樣。解決方案在的時候設置才能清除漸變背景。沒錯！我正在寫bug呢！不管你是小白還是大牛，寫bug無可避免，遇到bug怎么辦？別慌！毛主席教導我們戰略上藐視BUG，戰術上重視BUG！前端遇到的bug無非就三個方面結構層（HTML），表現層（CSS...

Charles 2019-08-21 16:25 評論0 收藏0